<template>
	<a-row :gutter="10">

		<a-col :xs="24" :sm="24" :md="24" :lg="5" :xl="5">
			<a-card :bordered="false" >
				<a-tree
					v-if="treeData?.length > 0"
					:defaultExpandAll="true"
					:tree-data="treeData"
					:field-names="{ children: 'children', title: 'name', key: 'id' }"
					@select="treeSelect">
				</a-tree>
				<div v-else>暂无分类</div>
			</a-card>
		</a-col>

		<a-col :xs="24" :sm="24" :md="24" :lg="19" :xl="19">
			<a-card :bordered="false">
				<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
					<a-row :gutter="24">
						<a-col :span="6">
							<a-form-item label="操作类型" name="operationType">
								<a-select v-model:value="searchFormState.operationType" placeholder="请选择操作类型" allow-clear :options="typeOptions" />
							</a-form-item>
						</a-col>
						<a-col :span="6">
							<a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
							<a-button style="margin: 0 8px" @click="reset">重置</a-button>
						</a-col>
					</a-row>
				</a-form>

				<s-table
					ref="tableRef"
					:columns="columns"
					:data="loadData"
					:alert="options.alert.show"
					bordered
					:row-key="(record) => record.id"
					:tool-config="toolConfig"
					:row-selection="options.rowSelection">

					<template #bodyCell="{ column, record }">
						<template v-if="column.dataIndex === 'operationType'">
							<a-tag color="green" v-if="record.operationType === '采购入库'">采购入库</a-tag>
							<a-tag color="green" v-if="record.operationType === '退货入库'">退货入库</a-tag>
							<a-tag  v-else-if="record.operationType === '销售出库'">销售出库</a-tag>
							<a-tag color="red" v-else-if="record.operationType === '删除单据'">删除单据</a-tag>
							<a-tag color="orange" v-else-if="record.operationType === '盘盈入库'">盘盈入库</a-tag>
							<a-tag color="purple" v-else-if="record.operationType === '盘亏出库'">盘亏出库</a-tag>
							<a-tag color="purple" v-else-if="record.operationType === '库存盘点'">库存盘点</a-tag>
						</template>
					</template>




				</s-table>
			</a-card>
		</a-col>
	</a-row>
</template>

<script setup name="inventorychangelog">
	import { cloneDeep } from 'lodash-es'
	import imsInventoryChangeLogApi from '@/api/ims/imsInventoryChangeLogApi'
	import imsWarehouseApi from "@/api/ims/imsWarehouseApi";
	import tool from "@/utils/tool";



	const treeData = ref([])
	const searchFormState = ref({})
	const searchFormRef = ref()

	const typeOptions = ref([])

	const tableRef = ref()
	const formRef = ref()
	const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
	const columns = [
		{
			title: '仓库',
			dataIndex: 'warehouse.wareName',
			customRender: ({ record }) => record.warehouse?.wareName

		},
		{
			title: '商品',
			dataIndex: 'product.productname',
			customRender: ({ record }) => record.product?.productName
		},
		{
			title: '变动数量',
			dataIndex: 'count'
		},
		{
			title: '金额',
			dataIndex: 'money'
		},
		{
			title: '单价',
			dataIndex: 'univalence'
		},
		{
			title: '当前库存数',
			dataIndex: 'oldCount'
		},
		{
			title: '实际库存数',
			dataIndex: 'actualCount'
		},
		{
			title: '操作类型',
			dataIndex: 'operationType'
		},
		{
			title: '操作日期',
			dataIndex: 'operationTime'
		},
	]
	const selectedRowKeys = ref([])
	// 列表选择配置
	const options = {
		// columns数字类型字段加入 needTotal: true 可以勾选自动算账
		alert: {
			show: true,
			clear: () => {
				selectedRowKeys.value = ref([])
			}
		},
		rowSelection: {
			onChange: (selectedRowKey, selectedRows) => {
				selectedRowKeys.value = selectedRowKey
			}
		}
	}
	const loadData = (parameter) => {
		const searchFormParam = cloneDeep(searchFormState.value)
		imsWarehouseApi.wareTree(searchFormParam).then(res => {
			treeData.value = res
		})



		return imsInventoryChangeLogApi.imsInventoryChangeLogPage(Object.assign(parameter, searchFormParam)).then((data) => {
			return data
		})
	}
	typeOptions.value = tool.dictList('bill_type')


	// 点击树查询
	const treeSelect = (selectedKeys) => {
		if (selectedKeys.length > 0) {
			searchFormState.value.wareId = selectedKeys.toString()
		} else {
			delete searchFormState.value.wareId
		}
		tableRef.value.refresh(true)
	}


	// 重置
	const reset = () => {
		searchFormRef.value.resetFields()
		tableRef.value.refresh(true)
	}
	// 删除
	const deleteImsInventoryChangeLog = (record) => {
		let params = [
			{
				id: record.id
			}
		]
		imsInventoryChangeLogApi.imsInventoryChangeLogDelete(params).then(() => {
			tableRef.value.refresh(true)
		})
	}
	// 批量删除
	const deleteBatchImsInventoryChangeLog = (params) => {
		imsInventoryChangeLogApi.imsInventoryChangeLogDelete(params).then(() => {
			tableRef.value.clearRefreshSelected()
		})
	}
</script>
